<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container{
            width:590px ;
            height: 470px;
            margin: 0 auto;
            overflow: hidden;
        }
        .img{
            position: relative;
        }
        .left,.right{
            position:absolute;
            /* z-index: 10; */
        }
        .left{
			height: 10px;
			width: 30px;
			display: inline-block;
			position: relative;
            
		}
		.left::after{
				content: "";
				height: 10px;
				width: 10px;
				top: 225px;
				left: 20px;
				border-width: 2px 2px 0 0;
				border-color: red;
				border-style: solid;
				transform: matrix(-0.71,-0.71,0.71,-0.71,0,0);
				position: absolute;
		}
        .left::after:hover{
            height: 15px;
            width: 15px;

        }
		.left::before{
				content: "";
				height: 10px;
				width: 10px;
				top: 225px;
				left: 560px;
				border-width: 2px 2px 0 0;
				border-color: red;
				border-style: solid;
				transform: matrix(0.71,0.71,-0.71,0.71,0,0);
				position: absolute;
		}
        .circle{
        list-style: none;
        position:absolute;
        left:580px;
        top:565px;
        }  
        .cilcr li{
        float:left;
        margin-left:20px;
        width:40px;
        height:5px;
        border:0px;
        background:lawngreen;
    }
    </style>
</head>
<body>
    <div class="container">
        <div class="img">
            <span class="left"></span>
            <img src="./images/q.jpg" alt="">
            <img src="./images/q (1).jpg" alt="">
            <img src="./images/q (2).jpg" alt="">
        </div>
        <ul class="circle">
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</body>
</html>